import React,{Component} from 'react'
import {Switch,Route,Link} from 'react-router-dom'
import {Content} from '../Components'


export default class QueryParams extends Component{
    render(){
        const {location,pattern,match,isExact} = this.props;
        return (
            <div>
                <h1>
                QueryParams
                </h1>
                <div className="leftNavi">
                    <ul>
                        <li><Link className="active" to={{
                            pathname:match.url + '/level1',
                            search:'?abc=123'
                        }}>level 1</Link></li>
                        <li><Link className="active" to={{
                            pathname:match.url + '/level2',
                            search:'?abc=234&xyz=567'
                        }}>level 2</Link></li>
                        <li><Link className="active" to={
                            match.url + '/level3?xyz=absvdvd'
                        }>level 3</Link></li>
                    </ul>
                </div>
                <div className="rightContent">
                    <p>第二个子组件显示内容</p>
                    <Switch>
                        <Route path={`${match.url}/:leve`} component={Content}/>
                    </Switch>
                </div>
            </div>
        )
    }
}